﻿<!DOCTYPE html>
  <html>
      <head>
         <meta charset="utf-8" />
          <title>IE10 下CSS3选择器及动画(animation)效果实例教程-blog.csdn.net/liwei3gjob</title>
         <style>
          div { 
              top: 100px;
              position: absolute;
             width: 500px;
             background-color: yellow;
         }
         @-webkit-keyframes 'wobble' {
             0% {
                 background-color: red;
                 -webkit-transform: rotate(0deg);
             }
             40% {
                 background-color: darkblue;
                 -webkit-transform: rotate(50deg);
             }
             70% {
                 background-color: yellow;
                 -webkit-transform: rotate(-30deg);
             }
             100% {
                 background-color: red;
                 -webkit-transform: rotate(0deg);
             }
         }
         div:hover {
             -webkit-animation-name: wobble;
             -webkit-animation-duration: 5s;
             -webkit-animation-timing-function: linear;
         }
         </style>
     </head>
     <body>
39         <div>IE10 下CSS3选择器及动画(animation)效果实例教程-blog.csdn.net/liwei3gjob</div>
40     </body>
41 </html>